<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          ><span style="color: #417ced">出库管理</span></el-breadcrumb-item
        >
        <el-breadcrumb-item>内部出库退货</el-breadcrumb-item>
      </el-breadcrumb>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="basic" style="margin-top:15px;">
      <p class="header">订单信息</p>
      <ul class="ul">
        <li>
          <!-- <p>原订单编号：2000103923</p> -->
          <p>订单编号：{{ tableData.orderId }}</p>
          <p>订单状态： {{ orderType[tableData.orderStatus-1] }}</p>
          <p>时 间 ：{{ $moment(tableData.createdTime) }}</p>
        </li>
        <li>
          <span>制单信息 ：</span>
          <span>{{ tableData.createdName }}</span>
        </li>
        <li>
          <span>收货信息 ：</span>
          <span>{{ tableData.consignee }}</span>
          <span>{{ tableData.receivingPhone }}</span>
          <span>{{ tableData.address+tableData.addressDetails }}</span>
        </li>
        <li>
          <span>物流备注 ：</span>
          <span>{{ tableData.comment?tableData.comment:'无' }}</span>
        </li>
        <div class="contentTemp">
          <div class="fontTemp">
            <p>物流公司 : </p>
            <div>
              <el-select
                v-model="logisticsCompany"
                placeholder="快递公司"
                filterable
                clearable
              >
                <el-option
                  v-for="itemsS in companys"
                  :key="itemsS.dictName"
                  :label="itemsS.dictName"
                  :value="itemsS.dictName"
                ></el-option>
              </el-select>
            </div>
            <div>
              <el-input
                type="text"
                placeholder="请输入包裹物流单号"
                v-model="logistCode"
              ></el-input>
            </div>
          </div>
        </div>
      </ul>
    </div>
    <div class="goods">
      <p class="header">商品详情</p>
      <span> 商品 </span>
      <el-table
        :data="tableData.interiorOrderCommodities"
        style="width: 100%"
        align="center"
      >
        <el-table-column label="品牌" prop="brandName"></el-table-column>
        <el-table-column label="商品名称" prop="commodityName"></el-table-column>
        <el-table-column label="原订单数" prop="number"></el-table-column>
        <el-table-column
          label="可退回数量"
          min-width="100px"
          prop="waitNumber"
        ></el-table-column>
        <el-table-column label="退货数量" min-width="195">
          <template slot-scope="scope">
            <div><span style="margin-right:10px;">正常</span> <el-input-number
              v-model="scope.row.numberY"
              :min="0"
              size="mini"
              :max="scope.row.number - (scope.row.numberP + scope.row.numberL)"
            ></el-input-number></div>
            <div><span style="margin-right:10px;">破损</span> <el-input-number
              v-model="scope.row.numberP"
              :max="scope.row.number - (scope.row.numberY + scope.row.numberL)"
              size="mini"
              :min="0"
            ></el-input-number></div>
            <div><span style="margin-right:10px;">漏件</span> <el-input-number
              v-model="scope.row.numberL"
              :min="0"
              size="mini"
              :max="scope.row.number - (scope.row.numberY+scope.row.numberP)"
            ></el-input-number></div>
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="price"></el-table-column>
        <el-table-column
          label="规格"
          prop="specificationName"
        ></el-table-column>
        <el-table-column label="小计" >
          <template slot-scope="scope">
            {{scope.row.price * scope.row.number}}
          </template>
        </el-table-column>
      </el-table>

      <span> 赠品 </span>
      <el-table
        :data="tableData.interiorOrderComplimentaries"
        style="width: 100%"
        align="center"
      >
        <el-table-column label="品牌" prop="brandName"></el-table-column>
        <el-table-column
          label="商品名称"
          prop="commodityName"
        ></el-table-column>
        <el-table-column label="原订单数" prop="number"></el-table-column>
        <el-table-column
          label="可退回数量"
          min-width="100px"
          prop="waitNumber"
        ></el-table-column>
        <el-table-column label="退货数量" min-width="195">
          <template slot-scope="scope">
            <div><span style="margin-right:10px;">正常</span> <el-input-number
              v-model="scope.row.numberY"
              :min="0"
              size="mini"
              :max="scope.row.number - (scope.row.numberP + scope.row.numberL)"
            ></el-input-number></div>
            <div><span style="margin-right:10px;">破损</span> <el-input-number
              v-model="scope.row.numberP"
              :max="scope.row.number - (scope.row.numberY + scope.row.numberL)"
              size="mini"
              :min="0"
            ></el-input-number></div>
            <div><span style="margin-right:10px;">漏件</span> <el-input-number
              v-model="scope.row.numberL"
              :min="0"
              size="mini"
              :max="scope.row.number - (scope.row.numberY+scope.row.numberP)"
            ></el-input-number></div>
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="price"></el-table-column>
        <el-table-column
          label="规格"
          prop="specificationName"
        ></el-table-column>
        <el-table-column label="小计" >
          <template slot-scope="scope">
            {{scope.row.price * scope.row.number}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="total">
      <div class="before">
        <p>原单总计</p>
        <p>共 {{ orderCount() }} 件</p>
        <p>运费：￥{{ tableData.charge?tableData.charge:0 }}</p>
        <p>赠品总价： ￥0</p>
        <p>商品总价：￥{{ tableData.total }}</p>
        <p>应收金额：￥{{ tableData.total }}</p>
        <p>已收金额：￥{{ tableData.receivedMoney }}</p>
        <p>代收金额：￥0</p>
      </div>
      <div class="back">
        <p>仓库收货总计</p>
        <p>正常{{ totalCout(0)}} 件</p>
        <p>破损{{ totalCout(1)}} 件</p>
        <p>漏件{{ totalCout(2)}} 件</p>
        <p>已收货总价: {{ totalCout(3)}}</p>
      </div>
    </div>
    <div class="notes">
      <p class="header">备注</p>
      <div>
        <el-input
          type="textarea"
          v-model="textarea"
          placeholder="请输入需要备注信息....."
        ></el-input>
      </div>
    </div>
    <div class="submit">
      <p @click="submintEvent" style="cursor: pointer">提交退货</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: {
        orderCommodityList: [],
        orderComplimentaryList: [],
        orderUser: {},
      },
      textarea: "",
      salay: 0,
      wareData: [],
      companys: [],
      logisticsCompany: "",
      logistCode: "",
      orderType: [
        "待提交",
        "审核中",
        "驳回",
        "待发货",
        "已发货",
        "待签收",
        "已签收",
      ],
    };
  },
  created() {
    this.logisticsExpress();
    this.getOrderDetail();
  },
  methods: {
    logisticsExpress() {
      this.axios
        .get("/sys/v1/common/by/group?groupId=courier_company", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.companys = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    submintEvent() {
      console.log(this.tableData,'tableData')
      console.log(this.totalCout(6),this.totalCout(0),this.totalCout(1),this.totalCout(2),'this.totalCout(2)this.totalCout(2)this.totalCout(2)')
      if (this.totalCout(6) !=this.totalCout(0) + this.totalCout(1) + this.totalCout(2)) 
      {
        this.$message.warning("数量没全退");
        return;
      }
      let request = {
        brokenTotal: this.totalCout(2),
        comment: this.textarea,
        commodityRequests: this.tableData.interiorOrderCommodities.map((i) => {
          return {
            brokenNo: i.numberL,
            commodityId: i.commodityId,
            destroyNo: i.numberP,
            image: i.image,
            number: i.numberY + i.numberP + i.numberL,
            receivedNo: i.numberY,
            total: i.price * (i.numberY + i.numberP + i.numberL),
            complimentaryId:i.commodityId
          };
        }),
        complimentaryRequests: this.tableData.interiorOrderComplimentaries.map(
          (i) => {
            return {
              brokenNo: i.numberL,
              complimentaryId: i.complimentaryId,
              destroyNo: i.numberP,
              image: i.image,
              number: i.numberY + i.numberP + i.numberL,
              receivedNo: i.numberY,
              total: i.price * (i.numberY + i.numberP + i.numberL),
              complimentaryId:i.commodityId

            };
          }
        ),
        destroyTotal: this.totalCout(1),
        returnTotal: this.totalCout(0),
        oldId: this.tableData.orderId,
        shouldReturnMoney: this.totalCout(4),
        totalReturnNumber: this.totalCout(5),
        returnMoney: this.totalCout(3),
        logisticsCompany: this.logisticsCompany,
        parcelNumber: this.logistCode,
      };
      let that = this;
      this.$confirm(
        "总计: " +
          `已收${that.totalCout(0)}件，破损: ${that.totalCout(
            1
          )}件，漏件: ${that.totalCout(2)}`,
        "确定提交退货申请",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.axios
            .post("order/v1/internal/interiorOrder/interiorOrderReturnOrder", {
              ...request,
            })
            .then((res) => {
              if (res.code == 0) {
                this.$router.go(-1);
                this.$message.success("退货成功");
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch((res) => {
          console.log(res);
          this.$message({
            type: "info",
            message: "申请失败",
          });
        });
    },
    getOrderDetail() {
      this.axios
        .get(
          "order/v1/internal/interiorOrder/interiorOrderDetails?orderId=" +
            this.$route.query.id
        )
        .then((res) => {
          const giftList=[]
          res.data.interiorOrderCommodities.map((item,i)=>{
            if(item.goodsType=='赠品'){
              giftList.push(item)
             res.data.interiorOrderCommodities.splice(i, 1)
            }
          })
          res.data.interiorOrderComplimentaries = giftList
          console.log(res.data,'res.data')
          this.tableData = res.data;
          if (this.tableData.interiorOrderCommodities) {
            for (let temp of this.tableData.interiorOrderCommodities) {
              this.$set(temp, "numberY", 0);
              this.$set(temp, "numberP", 0);
              this.$set(temp, "numberL", 0);
            }
          }
          if (this.tableData.interiorOrderComplimentaries) {
            for (let temp of this.tableData.interiorOrderComplimentaries) {
              this.$set(temp, "numberY", 0);
              this.$set(temp, "numberP", 0);
              this.$set(temp, "numberL", 0);
            }
          }
          console.log(this.tableData,'this.tableData')

          this.axios
            .post("/order/comm/commWarehouse/list", {
              pageSize: 999,
              pageNo: 1,
            })
            .then((res) => {
              this.wareData = res.data.list;
            });
        });
    },
    toOrder() {
      this.$router.push({
        name: "orderList",
        query: {
          activeName: "6",
        },
      });
    },
    orderCount() {
      let count = 0;
      if (this.tableData.interiorOrderCommodities) {
        this.tableData.interiorOrderCommodities.forEach((e) => {
          count += e.number;
        });
      }

      if (this.tableData.interiorOrderComplimentaries) {
        this.tableData.interiorOrderComplimentaries.forEach((e) => {
          count += e.number;
        });
      }
      return count;
    },
  },
  computed: {
    totalCout() {
      return (v) => {
        let count = 0;
        if (this.tableData.interiorOrderCommodities) {
          this.tableData.interiorOrderCommodities.forEach((e) => {
            if (!v) {
              count += e.numberY;
            } else if (v == 1) {
              count += e.numberP ? e.numberP : 0;
            } else if (v == 2) {
              count += e.numberL;
            } else if (v == 3) {
              count += e.numberY * e.price;
            } else if (v == 4) {
              count += e.number * e.price;
            } else if (v == 5) {
              count += e.numberY + e.numberP;
            } else if (v == 6) {
              count += e.number;
            }
          });
        }
        if (this.tableData.interiorOrderComplimentaries) {
          this.tableData.interiorOrderComplimentaries.forEach((e) => {
            if (!v) {
              count += e.numberY;
            } else if (v == 1) {
              count += e.numberP ? e.numberP : 0;
            } else if (v == 2) {
              count += e.numberL;
            } else if (v == 3) {
              count += e.numberY * e.price;
            } else if (v == 4) {
              count += e.number * e.price;
            } else if (v == 5) {
              count += e.numberY + e.numberP;
            } else if (v == 6) {
              count += e.number;
            }
          });
        }
        return count ? count : 0;
      };
    },
  },
};
</script>

<style scoped lang="scss">
.contentTemp {
  .fontTemp {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 0px;

    p {
      span {
        color: #ff5656;
      }

      font-size: 14px;
      color: #666666;
    }

    > div {
      margin-left: 10px;

      /deep/.el-input__inner {
        height: 30px;
        line-height: 30px;
      }

      /deep/.el-input__icon {
        height: 30px;
        line-height: 30px;
      }
    }

    .span {
      color: #666666;
      font-weight: 400;
      line-height: 20px;
      font-size: 14px;
      margin-right: 40px;
      word-spacing: 8px;
    }

    .span1 {
      display: inline-block;
      width: 50px;
      text-align: justify;
      text-justify: distribute-all-lines;
      /*ie6-8*/
      text-align-last: justify;
      /* ie9*/
      -moz-text-align-last: justify;
      /*ff*/
      -webkit-text-align-last: justify;
      /*chrome 20+*/
    }

    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      /* chrome*/
      .test1:after {
        content: ".";
        display: inline-block;
        width: 100%;
        overflow: hidden;
        height: 0;
      }
    }
  }
}

.basic {
  // width:94%;
  background: #fff;
  padding: 10px;

  .ul {
    padding: 10px 0;

    li {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      line-height: 35px;

      p {
        margin-right: 20px;
        font-size: 15px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
      }

      span {
        margin-right: 5px;
        font-size: 15px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}

.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 2px solid #e3e7ec;
}

.goods {
  background: #fff;
  margin: 10px auto 0;
  padding: 10px;

  > span {
    font-size: 15px;
    display: block;
    line-height: 30px;
    color: #2d7edf;
  }
}

/deep/.el-table .has-gutter .is-leaf {
  color: #333;
  text-align: center;
}

/deep/.el-table td,
.el-table th {
  text-align: center;
}

.total {
  background-color: #fff;
  padding: 10px;

  .before {
    width: 100%;
    text-align: right;
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 15px;

    p {
      display: inline-block;
      color: #333;
      font-size: 14px;
      margin-left: 15px;
      font-weight: 600;
    }
  }

  .back {
    width: 100%;
    text-align: right;
    border-bottom: 1px solid #d9d9d9;
    padding: 10px 0;

    p {
      display: inline-block;
      color: #333;
      font-size: 14px;
      margin-left: 25px;
      font-weight: 600;
    }

    p:nth-child(2) {
      padding: 0 30px;
    }
  }

  .deal {
    // width: 100%;
    // text-align: right;
    // width:30%;
    // position: relative;
    // right:0;
    // top:0;
    > p {
      font-size: 14px;
      color: #5276e9;
      font-weight: 600;
      line-height: 30px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      // margin: 15px 80px 15px 15px;
      // width:250px;
      // text-align: left;
    }

    div {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      p {
        display: inline-block;
        margin-right: 10px;
        font-size: 14px;
        color: #5276e9;
        font-weight: 600;

        span {
          color: #ff5656;
          font-weight: normal;
        }
      }

      /deep/.el-input__inner {
        width: 100px;
        height: 25px;
        line-height: 25px;
        background: #f2f2f2;
        border-radius: 4px;
        border: none;
      }
    }
  }
}

.notes {
  margin: 10px 0;
  background: #fff;
  padding: 10px;

  div {
    margin: 10px 0;
  }
}

.submit {
  background-color: #fff;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #d9d9d9;
  p {
    line-height: 30px;
    height: 30px;
    background: #4168e7;
    border-radius: 4px;
    width: 100px;
    color: #fff;
    font-size: 14px;
    text-align: center;
  }
}
</style>
